<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
    <title>File Browser</title>
    <link rel="stylesheet" href="resource/css/normalize.css">
    <link rel="stylesheet" href="resource/css/main.css">
</head>
<body>
<div id="container">
    <header>
        <img src="resource/img/pic_1.jpg" alt="File Browser">
    </header>
    <section>
        <h1>File Browser</h1>

        <div class="toggle-container">
            <div class="loading-flower">
                <div class="flower"></div>
            </div>
            <div class="frame" id="turn">
                <div class="button"></div>
            </div>
        </div>
    </section>
    <div id="statusbox" >
        <h2 class="sec-bksize setbkspace clearfix"><span class="k">端口设置</span>

            <div class="v"><span id="bkspace">loading...</span><i class="ico-set"></i></div>
        </h2>

    </div>
    <h2>使用帮助：</h2>
    <ol>
        <li>1: File Browser 是一个基于 Web 的文件管理器，支持多个用户的管理，且每个用户可以拥有自己可以访问的文件和权限。还支持文件分享，是个功能强大的个人网盘.</li>
        <li>2: 插件启用后可以通过 http://路由IP地址:端口 访问，（<font color="red">默认账号和密码都是admin</font>，登录后自行修改）</li>
        <li>3: <font color="green">建议配合 Frpc 插件使用,可以实现公网域名访问</font></li>
        <li>4: 有问题请在请github提issues <a href="https://github.com/mtjo/filebrowser">github.com/mtjo/filebrowser</a></li>
        <li>5: <a href="https://github.com/mtjo/filebrowser">★ Star & fork 点起来，方便后期更新版本</a></li>
    </ol>
</div>
<div id="loading" class="loading" style="display:none;">正在加载…</div>
<div id="toast" class="toast" style="display:none;"></div>
<div class="mask"
     style="position:fixed;left:0;top:0;z-index:1; width:100%;height:100%;background:rgba(0,0,0,0.4); display:none;"></div>
<div class="bkspaceset" style="display:none;">
    <form name="bkspaceset">
        <input type="hidden" name="bksizeauto" id="bksizeauto">

        <p class="title">端口设置</p>

        <p>设置端口,不要与其他应用冲突</p>

        <div class="btn-group btn-group-autosize">
            <div class="btn" data-size="8081">8081</div>
            <div class="btn" data-size="8088">8088</div>
            <div class="btn" data-size="8090">8090</div>
            <div class="btn" data-size="8888">8888</div>
        </div>
        <p>自定义：</p>

        <p><input type="text" name="bksizecust" id="bksizecust" placeholder="输入数值"> <em></em></p>

        <p class="btns">
            <button type="submit" class="btn submit">确认</button>
            <button type="button" class="btn cancel cancel__">取消</button>
        </p>
    </form>
</div>
<div class="loading-layer">
    <div class="bg-cont"></div>
</div>


<script src="resource/js/jquery-2.1.0.min.js"></script>
<script src="resource/js/jsencrypt.js"></script>
<script src="http://app.miwifi.com/js/router_request.js"></script>

<script>
    var appId = "2882303761518373345";

    var DEBUG = false;
    var lock = false;
    var errorCode = {
        2501: '安装插件失败',
        2502: '控制插件失败',
        2503: '插件包不存在',
        2504: '请输入插件ID',
        2505: '配置信息key不能以数字开头',
        2506: '此插件正在安装',
        2507: '此插件已经安装',
        2508: '插件签名验证错误',
        2509: '签名类型错误',
        2510: '更新状态出错',
        2511: 'Pid不存在',
        2512: '插件不存在',
        2513: 'sdk版本过低',
        2514: 'mount userdisk 出错',
        2515: '无法获取设备id'
    };
    var istoast = false;
    var toast = function (msg) {
        if (istoast) {
            $('#toast').stop(1, 1).hide();
        }
        istoast = true;
        $('#toast').html(msg).fadeIn(400, function () {
            setTimeout(function () {
                $('#toast').fadeOut(400);
                istoast = false;
            }, 2000);
        });
    };

    function getStatus() {
        var data = {appId: appId};
        routerRequest.request({
            path: "/api-third-party/service/datacenter/get_plugin_status",
            data: data,
            success: function (data) {
                //alert(data);
                data = $.parseJSON(data);
                if (data.code == 0) {
                    $('.loading-flower').addClass('fade-out');
                    $('.frame').addClass('fade-in');
                    if(data.isEnable){
                        $('#turn').addClass('open');
                        $('.defaulthide').show();
                    }else{
                        $('#turn').removeClass('open');
                        $('.defaulthide').hide();
                    }
                    $('#turn').bind('click', toggleStatus);

                } else if (data.code in errorCode) {
                    toast(errorCode[data.code]);
                } else {
                    data.msg && toast(data.msg);
                }
            },
            error: function (data) {
                toast('获取插件信息失败');
            }
        });
    }
    

    function toggleStatus(evt) {
        var target = evt.target;
        var isOpen = $('#turn').hasClass('open');
        var url = isOpen ? "/api-third-party/service/datacenter/plugin_disable" : "/api-third-party/service/datacenter/plugin_enable";
        var text = isOpen ? "关闭" : "打开";

        setEnable(isOpen ? "off" : "on")

        if (lock) {
            return
        }
        lock = true;

        $('#loading').text('正在' + text + '…').show();
        var data = {appId: appId};
        if (DEBUG) {
            $.extend(data, {deviceId: deviceId});
        }
        routerRequest.request({
            path: url,
            type: "GET",
            dataType: 'json',
            data: data,
            success: function (data) {
                data = $.parseJSON(data);
                if (data.code == 0) {
                    $('#turn').toggleClass('open');
                } else if (data.code in errorCode) {
                    toast(errorCode[data.code]);
                } else {
                    data.msg && toast(data.msg);
                }
                lock = false;
                $('#loading').hide();
                setTimeout(function () {
                    getStatus();
                }, 1000);
            },
            error: function (data) {
                lock = false;
                $('#loading').hide();
                toast('修改插件状态失败');
            }
        });
    }

    function setEnable(enable) {
        var url = '/api-third-party/service/datacenter/set_config';
        var data = {
            appId: appId,
            key: 'enable',
            value: enable
        };
        routerRequest.request({
            path: url,
            type: "GET",
            dataType: 'json',
            data: data,
            success: function (data) {
                data = $.parseJSON(data);
                if (data.code == 0) {
                    //toast('设置成功');
                    //location.reload(1);
                } else {
                    toast(data.msg);
                }
            },
            error: function () {
                toast('网络异常，请重试');
            }
        });
    }
    

    function setPort(port) {
        toast('正在提交设置...');
        var url = '/api-third-party/service/datacenter/set_config';
        var data = {
            appId: appId,
            key: 'port',
            value: port
        };
        routerRequest.request({
            path: url,
            type: "GET",
            dataType: 'json',
            data: data,
            success: function (data) {
                data = $.parseJSON(data);
                if (data.code == 0) {
                    toast('设置成功');
                    $('#bkspace').html(port);                  
                    $('.bkspaceset').toggle();
                    $('.mask').toggle();
                    toast("请手动重启服务使设端口生效，或重启路由生效");
                    $(".toggle-container").before("<span style='color:red; position: absolute;right: 56px;top: 0px;'>重启服务使设端口生效</span>");     
                } else {
                    toast(data.msg);
                }
            },
            error: function () {
                toast('网络异常，请重试');
            }
        });
    }
    function getPort() {

        var url = '/api-third-party/service/datacenter/config_info';
        var data = {
            appId: appId,
            key: 'port'
        };
        if (DEBUG) {
            $.extend(data, {deviceId: deviceId});
        }
        routerRequest.request({
            path: url,
            type: "GET",
            dataType: 'json',
            data: data,
            success: function (data) {
                //alert(data);
                data = $.parseJSON(data);
                if (data.code == 0) {
                    $('#bkspace').html(data.value);
                } else {
                    $('#bkspace').html(data.msg);
                }
            },
            error: function () {
                toast('网络异常，请重试');
            }
        });
    }
     
    $(document).ready(function(){

        $('.cancel__').click(function () {
            $('.bkspaceset').toggle();
            $('.mask').toggle();
        });
        $('.setbkspace').click(function (e) {
            $('.bkspaceset').toggle();
            $('.mask').toggle();
        });
        $('.btn-group-autosize .btn').click(function (e) {
            $('.btn-group-autosize .btn').removeClass('active');
            $(this).addClass('active');
            var val = $(this).attr('data-size');
            $('#bksizeauto').val(val);
        });
        $('#bksizecust').on('blur', function () {
            if (this.value != '') {
                $('#bksizeauto').val('');
                $('.btn-group-autosize .btn').removeClass('active');
            }
        });
        $(document.bkspaceset).on('submit', function (e) {
            e.preventDefault();
            var auto = $('#bksizeauto').val(),
                    cust = $('#bksizecust').val(),
                    val;
            if (auto == '' && cust == '') {
                $('#bksizecust').focus();
            } else {
                val = cust == '' ? auto : cust;
                val = parseInt(val, 10);
                setPort(val);
            }

        });
        getStatus();
        getPort();
    });
</script>
</body>
</html>
